<template>
  <el-table :data="allCategory" style="width: 100%">
    <el-table-column label="id" width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column label="父分类id">
      <template slot-scope="scope">      
         <template v-if="scope.row.edit">
              <!-- 子组件 -->
              <cascader-category @getPid="getchildPid"></cascader-category>
            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
          </template>        
        <span style="margin-left: 10px">{{ scope.row.pid }}</span>
      </template>
    </el-table-column>
    <el-table-column label="分类名称">     
      <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input class="edit-input" size="small" v-model="scope.row.name"></el-input>
            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
          </template>
          <span v-else style="margin-left: 10px">{{ scope.row.name }}</span>       
        </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button v-if="scope.row.edit" type="success" @click="handleEdit(scope.row)" size="mini" icon="el-icon-circle-check-outline">确定</el-button>
        <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="mini" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { selectAllCatetory, deleteCategory, updateCategory } from '@/api/category'
import cascaderCategory from '@/components/CascaderCategory'
export default {
  data() {
    return {
      allCategory: [],
      pid: ''
    }
  },
  created() {
    this.selectCategory()
  },
  components: { cascaderCategory },
  methods: {
    selectCategory() {
      selectAllCatetory()
        .then(response => {
          var result = response.data
          console.log(result)
          if (result.errcode === 0) {
            this.allCategoryTemp = result.data
          } else {
            this.$message(response.data.msg)
          }
          console.log(this.allCategoryTemp)
          // this.allCategory = this.handleCategoryData(this.allCategoryTemp, 0)
          this.allCategory = this.allCategoryTemp
          this.allCategory = this.allCategoryTemp.map(v => {
            this.$set(v, 'edit', false)
            v.originalName = v.name
            v.originalPid = v.pid
            return v
          })
          console.log(JSON.stringify(this.allCategory))
        })
        .catch(error => {
          console.log(error)
        })
    },
    deleteOneCategory(id) {
      deleteCategory(id)
        .then(response => {
          this.$message(response.data.msg)
          this.selectCategory()
        })
        .catch(error => {
          console.log(error)
        })
    },
    handleEdit(row) {
      // debugger
      row.pid = this.pid
      console.log(row)
      row.edit = false
      row.originalName = row.name
      row.originalPid = row.pid
      updateCategory(row.id, row.pid, row.name)
        .the(response => {
          if (response.data.errcode !== 0) {
            this.$message({
              message: response.data.msg,
              type: 'error'
            })
            row.pid = row.originalPid
            row.name = row.originalName
          } else {
            this.$message({
              message: response.data.msg,
              type: 'success'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    cancelEdit(row) {
      row.name = row.originalName
      row.pid = row.originalPid
      row.edit = false
      this.$message({
        message: 'The title has been restored to the original value',
        type: 'warning'
      })
    },
    handleDelete(index, row) {
      console.log(index, row)
      // debugger
      this.deleteOneCategory(row.id)
    },
    getchildPid(pid) {
      this.pid = pid
    }
  }
}
</script>